<template>
  <el-form class="light-source" v-bind="$attrs">
    <el-form-item label="光照设置">
      <div class="shrink" @click="shrink('illumination')">
        <SvgIcon v-if="shrinkFlag.illumination" icon-class="ic_向上" />
        <SvgIcon v-else icon-class="ic_向下" />
      </div>
      <div class="line"></div>
      <div v-if="shrinkFlag.illumination" class="shrink-contain">
        <div class="row-item">
          <span>跟随时间变化</span>
          <el-switch
            active-text="开"
            inline-prompt
            inactive-text="关"
            v-model="formData.illumination.shouldAnimate"
            @change="handler('shouldAnimate')"
          />
        </div>
        <div class="row-item">
          <span>光照时间设置</span>
        </div>
        <div class="light-time" :class="!formData.illumination.shouldAnimate ? 'active' : ''">
          {{ formData.illumination.currentTime + ': 00' }}
        </div>
        <div class="row-item no-top">
          <el-slider
            class="time-zone"
            v-model="formData.illumination.currentTime"
            :marks="marks"
            :max="24"
            :step="1"
            :class="formData.illumination.shouldAnimate ? 'disable' : ''"
            :disabled="formData.illumination.shouldAnimate"
            :format-tooltip="tooltip"
            @change="handler('currentTime')"
          />
        </div>
      </div>
    </el-form-item>
    <el-form-item label="光源设置">
      <div class="shrink" @click="shrink('lightSource')">
        <SvgIcon v-if="shrinkFlag.lightSource" icon-class="ic_向上" />
        <SvgIcon v-else icon-class="ic_向下" />
      </div>
      <div class="line"></div>
      <div v-if="shrinkFlag.lightSource" class="shrink-contain">
        <div class="row-item">
          <span>显示光源</span>
          <el-switch
            active-text="开"
            inline-prompt
            inactive-text="关"
            v-model="formData.lightSource.enableLighting"
            @change="handler('enableLighting')"
          />
        </div>
        <div v-if="formData.lightSource.enableLighting">
          <div class="row-item">
            <span>颜色</span>
            <el-color-picker v-model="formData.lightSource.color" @change="handler('color')" />
          </div>
          <div class="row-item">
            <span>强度</span>
          </div>
          <div class="row-item no-top">
            <el-slider
              class="progress"
              v-model="formData.lightSource.intensity"
              :min="0"
              :max="10"
              :step="1"
              @change="handler('intensity')"
            />
            <el-input
              class="progress-input"
              v-model.number="formData.lightSource.intensity"
              @blur="handler('intensity')"
              max="0"
              min="10"
              @keyup.enter.native="handler('intensity')"
            />
          </div>
          <div class="row-item">
            <span>方向</span>
            <el-select
              popper-class="dark-select-popper"
              v-model="formData.lightSource.lightType"
              @change="handler('lightType')"
            >
              <el-option
                v-for="list in directions"
                :key="list.value"
                :label="list.label"
                :value="list.value"
              />
            </el-select>
          </div>
        </div>
        <div class="row-item">
          <span>显示阴影</span>
          <el-switch
            active-text="开"
            inline-prompt
            inactive-text="关"
            v-model="formData.lightSource.shadows"
            @change="handler('shadows')"
          />
        </div>
        <div v-if="formData.lightSource.shadows">
          <div class="row-item margin-top-small">
            <el-checkbox
              v-model="formData.lightSource.softShadows"
              label="柔和阴影"
              size="large"
              @change="handler('softShadows')"
            />
          </div>
          <div class="row-item">
            <span>暗度</span>
          </div>
          <div class="row-item no-top">
            <el-slider
              class="progress"
              v-model="formData.lightSource.darknessData"
              :min="0"
              :max="100"
              :step="1"
              @change="handler('darkness')"
            />
            <el-input
              class="progress-input"
              v-model.number="formData.lightSource.darknessData"
              @blur="handler('darkness')"
              max="100"
              min="0"
              :step="1"
              @keyup.enter.native="handler('darkness')"
            />
            <span>%</span>
          </div>

          <div class="row-item">
            <span>阴影大小</span>
            <el-input
              class="default-input"
              v-model.number="formData.lightSource.size"
              @keyup.enter.native="handler('size')"
            />
            <span>px</span>
          </div>
          <div class="row-item">
            <span>最大距离</span>
            <el-input
              class="default-input"
              v-model.number="formData.lightSource.maximumDistance"
              @keyup.enter.native="handler('maximumDistance')"
            />
            <span>米</span>
          </div>
        </div>
      </div>
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
import { dayjs } from 'element-plus';

defineOptions({
  name: 'LightSource',
});

interface IProps {
  form: any;
}

const props = withDefaults(defineProps<IProps>(), {
  form: {},
});

const directions: any[] = [
  {
    label: '太阳光',
    value: 'sunlight',
  },
  {
    label: '平行光',
    value: 'directionLight',
  },
];

const formData = ref<any>(null);
const marks = reactive({
  0: {
    label: '0',
    style: {},
  },
  6: {
    label: '6',
    style: {},
  },
  12: {
    label: '12',
    style: {},
  },
  18: {
    label: '18',
    style: {},
  },
  24: {
    label: '24',
    style: {},
  },
});

const tooltip = (value: any) => {
  return value + ': 00';
};

const shrinkFlag = reactive<any>({
  illumination: true,
  lightSource: true,
});

function shrink(str: string) {
  shrinkFlag[str] = !shrinkFlag[str];
}

onMounted(() => {
  formData.value.lightSource.darknessData = 100 * formData.value.lightSource.darkness;
});

const handler = (fieldName: string) => {
  const cimInstance = window.cimInstance;
  // 光照设置
  if (['shouldAnimate', 'currentTime'].includes(fieldName)) {
    // 更新光源设置
    if (formData.value.illumination.shouldAnimate) {
      formData.value.illumination.currentTime = +dayjs(new Date()).format('HH');
      const date = dayjs(new Date()).format('YYYY-MM-DD');
      cimInstance.api.updateClock({
        shouldAnimate: true,
        currentTime: formData.value.illumination.currentTime,
        date,
        startHour: 6,
        endHour: 18,
        multiplier: 1, // 流速 正常为1，
        shadows: true,
      });
    } else {
      cimInstance.api.updateClock({
        shouldAnimate: false,
        currentTime: formData.value.illumination.currentTime,
      });
    }
  } else {
    if (['darkness'].includes(fieldName)) {
      formData.value.lightSource[fieldName] = formData.value.lightSource[fieldName + 'Data'] / 100;
    }
    const param: any = {};

    param[fieldName] = formData.value.lightSource[fieldName];
    // 开启光源
    if (fieldName === 'enableLighting' && formData.value.lightSource[fieldName]) {
      param.intensity = formData.value.lightSource.intensity;
      param.lightType = formData.value.lightSource.lightType;
      param.color = formData.value.lightSource.color;
      if (param.lightType === 'directionLight') {
        param.direction = [0.5, 3, -1];
      }
    }
    // 开启阴影
    if (fieldName === 'shadows' && formData.value.lightSource[fieldName]) {
      param.darkness = formData.value.lightSource.darkness;
      param.size = formData.value.lightSource.size;
      param.maximumDistance = formData.value.lightSource.maximumDistance;
    }
    if (fieldName === 'lightType') {
      param.color = formData.value.lightSource.color;
      if (formData.value.lightSource.lightType === 'directionLight') {
        param.direction = [0.5, 3, -1];
      }
    }
    if (fieldName === 'color') {
      if (!param.color) {
        formData.value.lightSource.color = '#FFFFFF';
        param.color = '#FFFFFF';
      }
    }

    console.log('光源设置: ----updateLight---', '参数如下：', param);
    cimInstance.api.updateLight(param);
  }
};

watchEffect(() => {
  formData.value = props.form;
});
</script>

<style lang="less" scoped>
.light-source {
  height: 100%;
  overflow-y: auto;

  .light-time {
    width: 56px;
    height: 24px;
    margin: 0 auto;
    margin-top: 5px;
    text-align: center;
    line-height: 24px;
    background: #aeb2bc;
    border-radius: 2px;
    opacity: 0.6;

    &.active {
      background: #1d1d1d;
    }
  }
  .progress-input {
    width: 70px;
    margin-left: 7px;
    margin-right: 5px;
  }

  :deep(.el-select) {
    width: 170px !important;
    margin-left: auto;
  }
}
</style>
